<template>
  <view class="warp_box">
    <view class="content">
      <view class="neironghang">
        <view class="left">
          <img :src="`http://localhost:3006/${good.img}`" alt="" />
        </view>
        <view class="right">
          <view class=""> 货品名称：{{ good.name }} </view>
          <view class=""> 货品编号：{{ good.id }} </view
          ><view class=""> 货品数量：{{ good.num }} </view
          ><view class=""> 货品价格：{{ good.price }} </view>
        </view>
      </view>
    </view>
    <view class="content1">
      <view class="yihang"> 货品颜色 </view>
      <view class="erhang">
        <button>{{ good.color }}</button>
      </view>
      <view class="num">
        <view class="x1"> 尺码 </view>
        <view class="x2"> 库存 </view>
        <view class="x3">
          <img src="../../static/chuku/minus_icon.png" alt="" />
          <text id="xx6">{{ good.num }} </text>
          <img src="../../static/chuku/plus_icon.png" alt="" />
        </view>
      </view>
      <view class="num">
        <view class="x1"> {{ good.cima }} </view>
        <view class="x2"> {{ good.num }} </view>
        <view class="x3">
          <img
            @click="jian_fn"
            src="../../static/chuku/minus_icon.png"
            alt=""
          />
          <text> {{ num }} </text>
          <img @click="jia_fn" src="../../static/chuku/plus_icon.png" alt="" />
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="x1">
        <view> 出:1 </view>
        <view> 共计: {{ zongjia }} </view>
      </view>
      <view class="">
        <button @click="toxuanze_fn">选好了</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      good: "",
      num: 0,
      goodnum: "",
      zongjia: 0,
      id: "",
    };
  },

  methods: {
    jian_fn() {
      if (this.num > 0) {
        this.num--;
        this.zongjia = this.num * this.good.price;
        this.good.num++;
        uni.request({
          url: "http://localhost:3006/xiugaikucun", //仅为示例，并非真实接口地址。
          data: {
            num: this.good.num,
            id: this.good.id,
          },
          header: {
            "custom-header": "hello", //自定义请求头信息
          },
          success: (res) => {
            console.log("数据请求成功。。。。。。。");
            this.good.num = res.data.goods_info.num;
          },
        });
      }
    },
    jia_fn() {
      if (this.num < this.goodnum) {
        this.num++;

        this.zongjia = this.num * this.good.price;

        this.good.num--;
        uni.request({
          url: "http://localhost:3006/xiugaikucun", //仅为示例，并非真实接口地址。
          data: {
            num: this.good.num,
            id: this.good.id,
          },
          header: {
            "custom-header": "hello", //自定义请求头信息
          },
          success: (res) => {
            console.log("数据请求成功。。。。。。。");
            this.good.num = res.data.goods_info.num;
          },
        });
        // 获取DOM
        // let view = uni.createSelectorQuery().in(this).select("#xx6");
        // view
        //   .fields(
        //     {
        //       size: true,
        //       scrollOffset: true,
        //     },
        //     (data) => {
        //       console.log("得到节点信息" + JSON.stringify(data));
        //       console.log("节点的宽为" + data.width);
        //     }
        //   )
        //   .exec();
      }
    },
    toxuanze_fn() {
      try {
        var value = uni.getStorageSync("storage_key");
        if (value) {
          console.log("修改之前的数组");
          console.log(value);
          var ww = [
            {
              good: this.good,
              goodnum: this.goodnum,
              num: this.num,
              zongjia: this.zongjia,
              id: this.id,
            },
          ];
          var is_you = false;
          var you_index = -1;
          for (let i = 0; i < value.length; i++) {
            if (value[i].id == ww[0].id) {
              is_you = true;
              you_index = i;
              break;
            }
          }
          if (is_you) {
            value[you_index].num = this.num + value[you_index].num;
            value[you_index].goodnum = this.goodnum;
            value[you_index].zongjia = this.zongjia + value[you_index].zongjia;
            uni.setStorage({
              key: "storage_key",
              data: value,
              success: function () {
                console.log("相同货品存储成功");
              },
            });
          } else {
            Array.prototype.push.apply(value, ww);
            uni.setStorage({
              key: "storage_key",
              data: value,
              success: function () {
                console.log("不同货品存储成功");
              },
            });
          }
          console.log("修改之后的数组");
          var rrr = uni.getStorageSync("storage_key");
          console.log(rrr);
        } else {
          console.log("走本地无储存");
          value = [];
          var ww = [
            {
              good: this.good,
              goodnum: this.goodnum,
              num: this.num,
              zongjia: this.zongjia,
              id: this.id,
            },
          ];
          Array.prototype.push.apply(value, ww);
          uni.setStorage({
            key: "storage_key",
            data: value,
            success: function () {
              console.log("新货品存储成功11111111");
              console.log(value);
            },
          });
        }
      } catch (e) {
        // error
      }
      uni.navigateTo({
        url: "./xuanze",
      });
    },
  },
  created() {
    // console.log(777777777777777);
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    console.log(option); //打印出上个页面传递的参数。
    console.log(option.id); //打印出上个页面传递的参数。

    uni.request({
      url: "http://localhost:3006/quyitiaoshuju", //仅为示例，并非真实接口地址。
      data: {
        id: option.id,
      },
      header: {
        "custom-header": "hello", //自定义请求头信息
      },
      success: (res) => {
        console.log("数据请求成功。。。。。。。");
        console.log(res.data.data);
        this.good = res.data.data[0];
        console.log(this.good);
        this.goodnum = this.good.num;
        this.id = this.good.id;
      },
    });
  },
  mounted() {},
};
</script>
<style scoped lang="less">
.warp_box {
  padding: 0 30rpx;
  background-color: F9F9F9;

  .neironghang {
    display: flex;
    padding: 0 40rpx;
    margin: 30rpx 0;
    background-color: #fff;

    .left {
      width: 170rpx;
      height: 170rpx;
      background-color: red;
      img {
        width: 170rpx;
        height: 170rpx;
      }
    }

    .right {
      margin-left: 20rpx;
      width: 300rpx;
      height: 170rpx;
    }
  }
  .content1 {
    .yihang {
      height: 60rpx;
      line-height: 60rpx;
      border-bottom: 1rpx solid #ddd;
      background-color: #fff;
    }
    .erhang {
      height: 80rpx;
      padding-top: 20rpx;
      // line-height: 80rpx;
      border-bottom: 1rpx solid #ddd;
      background-color: #fff;

      button {
        background-color: #fccd05;
        width: 180rpx;
        // margin: 20rpx 0;
        margin-left: 0;
        height: 60rpx;
        line-height: 60rpx;
        font-weight: 600;
      }
    }

    .num {
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      border-bottom: 1rpx solid #ddd;
      height: 80rpx;
      line-height: 80rpx;
      .x1 {
        width: 100rpx;
      }
      .x2 {
        width: 100rpx;
      }
      .x3 {
        text {
          display: inline-block;
          width: 120rpx;
          text-align: center;
          font-weight: 700;
        }
        img {
          width: 80rpx;
          height: 40rpx;
          vertical-align: middle;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
